<template>
    <view class="register">
        <view class="logo_img">
            <image src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/logo_index.png" alt=""></image>
        </view>
        <view class="register_from">
            <view class="bakcffff">
                <view class="bind_nbr">
                    <text>手机号</text>
                    <input placeholder="请输入手机号" bindinput="getUerInput" maxlength="11" minlength="11"  type="number">
                </view>
                <!--<view class="dislpayTabcll">-->
                <!--<view class="bind_nbr">-->
                <!--<text>图形验证码</text>-->
                <!--<input placeholder="请输入图形验证码"  type="text">-->
                <!--</view>-->
                <!--<view class="huoqu">-->
                <!--<image src={{valImage}}></image>-->
                <!--</view>-->
                <!--</view>-->
                <view class="dislpayTabcll">
                    <view class="bind_nbr">
                        <text>验证码</text>
                        <input placeholder="请输入验证码" maxlength="6" minlength="6" bindinput="getUerInputSmsCode" type="text">
                    </view>
                    <view class="huoqu">
                        <button @tap="sendMSGINfo" wx:if="{{sendCheck}}">获取验证码</button>
                        <button class="noBtn" wx:if="{{!sendCheck}}">{{sendNum}}</button>
                    </view>
                </view>
                <view class="button type_main" @tap="loginBtn">注册</view>
                <navigator class="toLogin" url="/pages/personalCenter/login">去登录</navigator>
            </view>
        </view>
    </view>
</template>
<script>
    import wepy from 'wepy';
    import api from '@/api/api';
    import utils from '@/utils/utils';
    import tips from '@/utils/tip';
    import {USER_INFO, USER_SPECICAL_INFO} from '@/utils/constant';

    export default class login extends wepy.page {
        config = {  // 配置当前页面
            navigationBarTitleText: '注册'    // 头部标题
        };
        components = {};

        data = {
            register:{
                phone:"",
                smsCode:""
            },
            smsCodeKey:"",
            sendCheck:true,
            sendNum:60,
        };
        onLoad(){
            const t = this;
            utils.getUUId();
            t.$apply();
        };
        /**
         *  发送短信
         * @param data
         * @returns {Promise.<*>}
         */
        async sendMSGToUser (data){
            const t = this;
            // 加 await 是为了同步，不然这里是异步操作，后面的json.data 就无法获取数据
            let _json = await api.sendSms({
                query: data
            });
            if(_json.data.code == "0"){
                tips.toast("短信发送成功",null,"none");
                t.sendCheck = false;
                let c = setInterval(()=> {
                    t.sendNum--;
                    if(t.sendNum<=0){
                        t.sendNum = 60;
                        t.sendCheck = true;
                        clearInterval(c);
                    }
                    t.$apply();
                },1000)
            }else{
                tips.toast("短信发送失败",null,"none");
            }
        }
        /**
         *  登录或者注册
         * @param data
         * @returns {Promise.<*>}
         */
        async userLoginFun (data){
            const t = this;
            // 加 await 是为了同步，不然这里是异步操作，后面的json.data 就无法获取数据
            let _json = await api.phoneRegister({
                query: data
            });
            if(_json.data.code == "0"){
                wepy.setStorageSync("refreshToken",_json.data.data.refreshToken);
                wepy.setStorageSync("token",_json.data.data.token);
                wepy.setStorageSync("userId",_json.data.data.userId);
                wepy.switchTab({
                    url: "/pages/main/main"
                });
            }else{
                // 提示
                tips.toast(_json.data.msg,null,"none");
            }
        }
// ================= 非模板中调用的方法 end =================

        methods = {  // 在模板中可以调用的方法
            loginBtn(){
                let _that = this;
                if(_that.register.phone == ""){
                    tips.toast("请输入手机号 ",null,"none");
                    return false;
                }
                if(_that.register.smsCode == ""){
                    tips.toast("无效的验证码",null,"none");
                    return false;
                }
                let _phoneFormat = utils.vailPhone(this.register.phone);
                if(!_phoneFormat){
                    tips.toast("请输入正确的手机号码",null,"none");
                    return false;
                }

                let _par ={
                    smsCodeKey:_that.smsCodeKey,
                    phone:_that.register.phone,
                    smsCode:_that.register.smsCode
                }

                _that.userLoginFun(_par);


            },
            // 获取用户的输入的电话号码
            getUerInput(e){
                this.register.phone = e.detail.value;
            },
            // 获取用户的输入的电话号码
            getUerInputSmsCode(e){
                this.register.smsCode = e.detail.value;
            },
            sendMSGINfo(){
                // 检查手机格式是否正确
                let phoneFormat = utils.vailPhone(this.register.phone);

                if(phoneFormat){
                    let _that = this;
                    // 是手机格式,发送验证码
                    _that.smsCodeKey = utils.getUUId()
                    let _par = {
                        phone:this.register.phone,
                        key:_that.smsCodeKey,
                    }
                    this.sendMSGToUser(_par);
                }else{
                    // 不是手机格式
                    tips.toast("请输入正确的手机号码",null,"none");
                }
            }

        };
        events = {};
    }

</script>
<style lang="less">
    .register {
        background: #fff;
        height: 100vh;
        .logo_img {
            width: ~'196rpx';
            height: ~'331rpx';
            margin: 0 auto;
            padding-top: ~'200rpx';
            padding-bottom: ~'40rpx';
            image {
                width: ~"196rpx";
                height: ~"331rpx";
            }
        }
        .register_from {
            width: 90%;
            margin: 0 auto;
            .dangqian_nbr {
                padding: ~'20rpx';
            }
            .bakcffff {
                background: #fff;
                padding: ~'20rpx 20rpx 40rpx';

                > view {
                    margin-top: ~'20rpx';
                }
            }
            .bind_nbr {
                border-bottom: 1px solid #ddd;
                border-radius: 2px;
                padding-top: ~'10rpx';
                padding-bottom: ~'10rpx';
                text {
                    display: table-cell;
                    padding-left: ~'20rpx';
                    vertical-align: middle;
                    font-size: ~'26rpx';
                    width: ~'150rpx';
                }
                input {
                    display: table-cell;
                    vertical-align: middle;
                    font-size: ~'24rpx';
                }
            }
            .huoqu {
                button {
                    font-size: ~'26rpx';
                    padding-top: ~'5rpx';
                    padding-bottom: ~'5rpx';
                    color: #fff;
                    border: none;
                    background: orange;
                }
                .noBtn{
                    background: #938d87;
                }
            }
            .dislpayTabcll {
                .bind_nbr {
                    width: ~'488rpx';
                    display: table-cell;
                    vertical-align: middle;
                }
                .huoqu {
                    width: ~'220rpx';
                    display: table-cell;
                    vertical-align: middle;
                    overflow: hidden;
                    button {
                        width: ~'200rpx';
                        float: right;
                    }
                    image {
                        width: ~'200rpx';
                        height: ~'70rpx';
                        float: right;
                    }
                }
            }
            .pad20 {
                padding: ~'0 20rpx';
            }
            .toLogin{
                color: #ffb025;
                margin-top: 10rpx;
            }
        }
    }

</style>
